<template>
  <div class="index">
    <!-- 搜索 -->
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action @cancel="cancel" autofocus background="#8ddbff" />
    </div>
    <div>
      <van-cell-group v-for="(boks, index) in searr" :key="index">
        <!-- <p>{{ index }}</p> -->
        <van-card :desc="boks.writer" :title="boks.book_name" :thumb="boks.book_cover" v-if="index == 0" @click="bookxq(boks.id)" />
        <van-cell :title="boks.book_name" :value="boks.writer" v-else-if="index <= 8" @click="bookxq(boks.id)" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Cell, CellGroup } from 'vant'
import { Search } from 'vant'
import { Card } from 'vant'

export default {
  name: 'book_search',
  data() {
    return {
      value: '',
      searchbook: []
    }
  },
  methods: {
    // 取消
    cancel() {
      this.$router.push('/book')
    },
    // 查看详情
    bookxq(index) {
      this.$router.push({
        path: `/bookDetail/${index}`
      })
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/book_search'
    }).then((res) => {
      this.searchbook = res.data
      // console.log(res)
    })
  },
  computed: {
    // 过滤器方法
    searr() {
      // console.log(11)
      return this.searchbook.filter((item) => item.book_name.includes(this.value) !== false)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
